<template>
  <div class="shopping">
    <!-- 标题 -->
    <div class="header">
      <div class="center-left">
        <img src="./img/shopping.png" alt="" />
      </div>
      <div class="center-left-span">
        <span>购物车可领优惠券</span>
      </div>
      <button class="btn">
        领劵
        <!-- 向上箭头 -->
        <i class="icon-iconfonti2-copy-copy-copy-copy"></i>
        <!-- 向下箭头 -->
        <i class="icon-iconfonti2-copy-copy-copy-copy1"></i>
      </button>
    </div>
    <!-- 表格栏 -->
    <div class="select">
      <div class="select-all">
        <input class="chooseAll" type="checkbox" />
        <span>已选</span>
      </div>
      <div class="select-alls">
        <div class="cart-th2">商品</div>
        <div class="cart-th3">单价（元）</div>
        <div class="cart-th4">数量</div>
        <div class="cart-th5">小计（元）</div>
        <div class="cart-th6">操作</div>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="three">
      <div class="three-one">全场换购</div>
      <div class="three-two">已满足199元享低至3.3元超值换购</div>
      <button>去换购</button>
      <a href="">继续凑单>></a>
    </div>
    <!-- 第四行  v-for="goods in goodList" :key="goods.id"-->
    <div class="four" v-if="!Object.keys(goods).length == 0">
      <!-- <div class="four-all"> -->
      <input class="input" type="checkbox" v-model="isdown" />
      <div class="tupian">
        <img :src="goods.goodDefaultImg" />
        <div>{{ goods.goodName }}</div>
        <div class="money">￥{{ goods.price }}</div>
      </div>
      <InputNumber
        style="margin-right: 50"
        :value="goods.goodNum"
        @input="deleteGoods(goods, $event)"
        :max="100"
      >
      </InputNumber>
      <div class="money2">￥{{ goods.price * goods.goodNum }}</div>
      <div class="five">
        <a href="" class="five-one">移入收藏夹</a>
        <br />
        <a class="five-two" @click="showDelCart">删除</a>
      </div>
    </div>

     <div class="four" v-else>
      <h1>暂无商品</h1>
    </div>
    <!-- 第五行 -->
    <div class="six">
      <div class="select-all">
        <input class="chooseAll" type="checkbox" v-model="isdown" />
        <span>全选</span>
      </div>
      <div class="option">
        <a href="#none">删除选中的商品</a>
        <a href="#none">清除失效商品</a>
      </div>
      <div class="money-box">
        <div class="chosed">
          已选择
          <span>1</span>件商品
        </div>
        <div class="money1">
          <div class="heji">商品合计: ￥1234.00</div>
          <div class="youhui">已优惠: ￥122.00</div>
        </div>
        <div class="money2">
          <div class="zongjia">
            应付总额:
            <span>￥ {{ goods.price * goods.goodNum }}</span>
          </div>
        </div>
        <div class="sumbtn">
          <a class="sum-btn" target="_blank" @click="toPay">下单</a>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="carousrl">
      <Carousel />
    </div>
  </div>
</template>

<script>
// 引入防抖函数
import Vue from "vue";
import debounce from "lodash/debounce";
import Carousel from "@/components/Carousel";
import InputNumber from "@/components/InputNumber";
export default {
  data() {
    return {
      goods: {},
      // goodList:[]
      isdown: true,
    };
  },
  mounted(){
    this.goods=JSON.parse(sessionStorage.getItem("goods"))
  },
  methods: {
    // 删除商品
    showDelCart() {
      this.isdown = true;
      // this.Id==id
      for (let key of Object.keys(this.goods)) {
        Vue.delete(this.goods, key);
      }
      sessionStorage.removeItem('goods')
    },
    // 更新商品数量(加或减)
    deleteGoods: debounce(function (goods, num) {
      // 商品数量=最新的值-原有的数量
      // goods.Id,
      goods.goodsNum = num - goods.goodsNum;
      // 数量剪完在赋值
      // goods.goodsNum=num
    }, 1000),
    // 跳转到Pay详情页面
    toPay() {
      this.$router.push("/Pay");
    },
  },
  // 注册组件
  components: {
    InputNumber,
    Carousel,
  },
};
</script>

<style lang="less" scoped>
.shopping {
  width: 1519px;
  // height:863px;
  border: 1px solid black;
  /* margin:60px 0 0 0; */
  /* background-color: blanchedalmond; */
}
/* 标题栏 */
.header {
  display: flex;
  width: 1068px;
  height: 40px;
  margin: 10px 0 0 0;
  /* margin-top:10px; */
  margin-left: 201px;
  padding: 0 0 0 22px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.header .center-left img {
  width: 30px;
  height: 24px;
  margin-top: 10px;
  margin-left: -5px;
}
.header .center-left-span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  /* background-color: #E36844; */
  padding: 0 825px 0 20px;
}
.header .btn {
  width: 88px;
  height: 40px;
  padding: 0 36px;
  background-color: #e36844;
  margin-right: -1000px;
}
.header .btn span {
  font-size: 12px;
}

/* 表格头 */
.select {
  display: flex;
  width: 1068px;
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
  margin-left: 201px;
  padding: 0 0 0 22px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}
.select-alls {
  display: flex;
  /* justify-content: space-between;  */
  /* border:1px solid red;   */
}
.select-alls .cart-th2 {
  width: 300px;
  height: 19.2px;
  font-size: 13px;
}
.select-alls .cart-th3 {
  width: 180px;
  height: 19.2px;
  font-size: 13px;
}
.select-alls .cart-th4 {
  width: 170px;
  height: 19.2px;
  font-size: 13px;
}
.select-alls .cart-th5 {
  width: 150px;
  height: 19.2px;
  font-size: 13px;
  padding: 0 30px 0 0;
}
.select-alls .cart-th6 {
  width: 129px;
  height: 19.2px;
  font-size: 13px;
  padding: 0 0 0 31px;
}

/* 第三行 */
.three {
  display: flex;
  width: 1068px;
  height: 40px;
  margin-top: 10px;
  margin-left: 201px;
  padding: 0 0 0 22px;
  background-color: #fffbf0;
  /* border:1px solid red;  */
}
.three .three-one {
  width: 58px;
  height: 20px;
  background-color: #e36844;
  font-size: 12px;
  margin: 11px 10px 0 0;
  padding: 0 5px;
  line-height: 20px;
  color: #fff;
}
.three .three-two {
  width: 213px;
  height: 19px;
  line-height: 19px;
  font-size: 14px;
  margin: 0 20px 0 0;
  color: #666;
  padding: 10px;
}
.three button {
  width: 66px;
  height: 24px;
  /* padding:10px ; */
  margin: 8px;
  font-size: 12px;
  color: #d4282d;
  border: 1px solid #d4282d;
  background-color: #fff;
}
.three a {
  width: 77px;
  height: 19px;
  font-size: 14px;
  color: #6699cc;
  margin: 10px;
}

/* 第四行 */
.four {
  display: flex;
  width: 1092px;
  // height:120px;
  margin-top: 20px;
  margin-left: 201px;
  padding: 20px 0;
  background-color: #fffbf0;
  border: 1px solid #ddd;
}
.four .input {
  border: 1px solid red;
  padding: 0 0 0 20px;
  margin-top: 50px;
  margin-left: 25px;
}
.tupian {
  padding: 0 0 0 20px;
  display: flex;
}
.tupian img {
  height: 98px;
  width: 98px;
  /* border:1px solid red; */
  background-color: #f4f4f4;
}
.tupian div {
  width: 200px;
  height: 16px;
  margin-top: 30px;
  color: black;
  font-size: 15px;
  /* border:1px solid red; */
}
.tupian .money {
  margin-right: 10px;
  width: 180px;
  height: 60px;
  margin-top: 20px;
  /* border:1px solid red; */
}
.four .money2 {
  width: 58px;
  height: 14px;
  color: brown;
  font-size: 14px;
  margin: 20px;
  // margin:20px 0 0 120px;
  /* border:1px solid red; */
  /* padding:10px 0 0; */
}
.five {
  width: 500px;
  height: 40px;
  margin-top: 20px;
  padding: 0 0 0 100px;
}
.five .five-one {
  width: 70px;
  height: 20px;
  /* border:1px solid red; */
  font-size: 14px;
  color: black;
}
.five .five-two {
  width: 98px;
  height: 24px;
  /* margin:30px; */
  /* border:1px solid red; */
  font-size: 14px;
  color: black;
  padding: 0px 0 0;
}

/* 第五行 */
.six {
  display: flex;
  width: 1092px;
  height: 70px;
  line-height: 50px;
  margin-top: 20px;
  margin-left: 201px;
  /* padding:20px 0; */
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}
.six .select-all {
  margin-left: 24px;
}

.six .option a {
  padding: 0 0 0 40px;
  font-size: 14px;
  color: #333;
}
.money-box {
  display: flex;
}
.money-box .chosed {
  padding: 0 0 0 40px;
  font-size: 14px;
  color: #333;
}
.money-box .money1 {
  text-align: center;
  /* margin:-20px 0 0 10px; */
  width: 228px;
  height: 70px;
  line-height: 40px;
  /* border:1px solid black; */
  border-right: 1px solid #dddddd;
}
.money1 .heji {
  width: 167px;
  height: 32px;
  color: #9999;
  font-size: 14px;
  padding: 6px 0 0;
}
.money1 .youhui {
  width: 150px;
  height: 32px;
  color: #9999;
  font-size: 14px;
}
.money-box .money2 {
  text-align: center;
  /* margin:-20px 0 0 10px; */
  width: 228px;
  height: 70px;
  line-height: 70px;
  /* border-right:1px solid #DDDDDD; */
}
.money2 .zongjia {
  margin: -10px 0 0 -50px;
  color: black;
  font-size: 14px;
}
.money2 .zongjia span {
  color: #be4141;
  font-size: 22px;
  font-weight: 1000;
  padding: 20px 0 0 0;
}
.money-box .sumbtn {
  margin: 0 0 0 10px;
  width: 165px;
  height: 70px;
  line-height: 70px;
  color: #fff;
  font-size: 18px;
  background-color: #b4a078;
}
.sum-btn {
  margin: 0 0 0 60px;
  color: #fff;
}

// 轮播图
.carousrl {
  width: 1088px;
  height: 337px;
  // text-align: center;
  border: 1px solid red;
  margin: 50px 0 0 200px;
}
</style>